<template>
  <div class="app-container">
    <div class="table-operation">
      <el-button v-if="hasBtn['新增'] && isDev" type="primary" @click="c">
        新增
      </el-button>
    </div>

    <el-table :data="list.data" v-loading="list.loading" v-bind="tableProp">
      <el-table-column label="配置项名称" prop="title" />
      <el-table-column label="配置项KEY" prop="propName" v-if="isDev" />
      <el-table-column label="配置项类型" prop="type">
        <template slot-scope="{ row: { type }}">
          {{ options.type.find(({ value }) => value === type).label }}
        </template>
      </el-table-column>
      <el-table-column label="配置项值">
        <template slot-scope="{ row: { type, propValue }}">
          <template v-if="type === 'string'">
            {{ propValue }}
          </template>
          <span v-else-if="type === 'blob'" class="el-icon-folder" text="30px" />
          <PicViewer v-else-if="type === 'img'" :value="propValue" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <KiPopButton v-if="hasBtn['编辑']" @click="u(row, 'cache')">
            编辑
          </KiPopButton>
          <KiPopButton v-if="hasBtn['删除'] && isDev"
            :elPopconfirmProps="{ title: '确认删除吗？' }" @click="d({ id: row.id })">
            删除
          </KiPopButton>
        </template>
      </el-table-column>
    </el-table>

    <KiFormDialog :title="formTitle" :readonly="form.status === 'r'" ref="formRef"
      v-model="form.data" :show.sync="form.show"
      :submit="() => submitForm(jsonToFormData(form.data))" :loading="form.loading">
      <template #el-form>
        <el-form-item label="配置项名称" prop="title" verify>
          <el-input v-model="form.data.title" clearable :disabled="!isDev" />
        </el-form-item>
        <el-form-item label="配置项KEY" prop="propName" verify v-if="isDev">
          <el-input v-model="form.data.propName" clearable />
        </el-form-item>
        <el-form-item label="配置项类型" prop="type" verify>
          <KiSelect v-model="form.data.type" :props="{ label: 'label', value: 'value', }"
            :options="options.type" :disabled="!isDev" />
        </el-form-item>
        <template v-if="form.data.type">
          <el-form-item v-if="form.data.type == 'string'" label="配置项值" prop="propValue"
            verify>
            <el-input v-model="form.data.propValue" clearable />
          </el-form-item>
          <!-- 编辑的时候文件不能回显，不必填了 -->
          <el-form-item v-if="form.data.type == 'blob'" label="配置文件" prop="propValue"
            :verify="{ required: form.status !== 'u' }">
            <div v-if="form.status === 'u'" class="el-icon-folder text-30px"></div>
            <Filepool :count="1" v-model="form.data.file" fileType="credentials"
              :placeholder="form.status === 'u' ? '重新上传配置文件' : '请上传配置文件'"
              :upload="false" />
          </el-form-item>
          <el-form-item v-if="form.data.type == 'img'" label="图片" prop="propValue" verify>
            <Imgpond v-model="form.data.propValue" :count="1" />
          </el-form-item>
        </template>
      </template>
    </KiFormDialog>
  </div>
</template>

<script>
import pageMixin from '@/utils/pageMixin'
import useAdmateAdapter from '@/utils/useAdmateAdapter'
import settings from '@/settings'
import { jsonToFormData } from '@/utils'

export default {
  mixins: [pageMixin],
  setup: () => useAdmateAdapter({
    urlPrefix: 'sot-admin-api/sys/other-config',
    axiosConfig: {
      getList: {
        url: 'queryForList',
      }
    },
    list: {
      dataAt: 'data',
    },
    form: {
      data: {
        domainId: import.meta.env.VITE_APP_domainId,
      },
    },
  }),
  data() {
    return {
      options: {
        type: [
          { label: '字符串', value: 'string' },
          { label: '文件', value: 'blob' },
          { label: '图片', value: 'img' },
        ],
      }
    }
  },
  computed: {
    isDev() {
      return import.meta.env.MODE === 'development'
    },
  },
  methods: {
    jsonToFormData,
  },
}
</script>
